<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!--    头部-->
    <i th:replace="~{common :: head}"></i>
    <!--左侧-->
    <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <!--            layui-nav-itemed  默认展开列表-->
            <li class="layui-nav-item ">
                <a class="javascript:;" href="javascript:;"><i class="layui-icon layui-icon-rate-solid"></i>  菜品</a>
                <dl class="layui-nav-child">
                    <dd ><a th:href="@{/food/category/index}">• 菜品类别</a></dd>
                    <dd > <a th:href="@{/food/record/index}">• 菜品档案</a></dd>
                    <dd ><a th:href="@{/food/taste/index}">• 菜品口味</a></dd>
                    <dd><a th:href="@{/food/specification/index}">• 规格管理</a></dd>
                    <dd><a th:href="@{/food/material/index}">• 原料管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item ">
                <a class="" href="javascript:;"><i class="layui-icon layui-icon-template-1"></i>  库存</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/inventory/record/index}">• 菜品库存</a></dd>
                    <dd><a th:href="@{/inventory/material/index}">• 原料库存</a></dd>
                    <dd><a th:href="@{/purchase/orders/index}">• 采购单</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item ">
                <a class="" href="javascript:;"><i class="layui-icon layui-icon-form"></i>  报表</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/statement/orders/index}">• 订单报表</a></dd>
                    <dd><a th:href="@{/statement/record/index}">• 菜品流水</a></dd>
                    <dd><a th:href="@{/statement/recordValue/index}">• 菜品销量</a></dd>
                    <dd><a th:href="@{/statement/daily/index}">• 经营日报</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item ">
                <a class="" href="javascript:;"><i class="layui-icon layui-icon-rmb"></i>  促销</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/promotion/specialOffer/index}">• 特价折扣</a></dd>
                    <dd><a th:href="@{/promotion/mealHot/index}">• 套餐热卖</a></dd>
                    <dd><a th:href="@{/promotion/now/index}">• 当前促销</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item ">
                <a class="" href="javascript:;"><i class="layui-icon layui-icon-username"></i>  会员</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/member/category/index}">• 会员类别</a></dd>
                    <dd><a th:href="@{/member/set/index}">• 会员设置</a></dd>
                    <dd><a th:href="@{/member/manage/index}">• 会员管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;"><i class="layui-icon layui-icon-auz"></i>  门店</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/shop/assistant/index}">• 店员管理</a></dd>
                    <dd class="layui-this"><a th:href="@{/shop/table/index}">• 桌位管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="layui-icon layui-icon-set-fill"></i>  设置</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/set/pay/index}">• 支付设置</a></dd>
                    <dd><a th:href="@{/merchants/information/index}">• 商户资料</a></dd>
                </dl>
            </li>
        </ul>
    </div>



    <div class="layui-body layui-bg-gray">
        <!-- 内容主体区域 -->
        <div style="background-color:white; width: 100%;height: 5%;padding-left: 130px;padding-top: 5px" >
        <span class="layui-breadcrumb" >
            <a href="" style="font-size: 20px">门店</a>
             <a href="" style="font-size: 20px">桌位管理</a>
        </span>
        </div>

        <!--正文-->
        <div style="background-color:white; width: 90%; height: 90%;margin-top: 1%;margin-left: 4%;padding-top: 1%;padding-left: 1%;padding-right: 1%">

            <!--查询条件-->
            <div>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">

                            <div class="layui-input-inline">
                                <select id="merchantsId" lay-verify="required" lay-search="" lay-filter="merchantsId">
                                    <option value="">店铺名称</option>
                                    <option th:each="l : ${merchantsInformationList}" th:value="${l.id}" th:text="${l.name}"
                                            th:selected='${l.id == 2019001}'

                                    >无</option>
                                </select>

                            </div>
                        </div>

                        <!--<div class="layui-inline">-->
                            <!--<div class="layui-input-inline">-->
                                <!--<input type="text" id="recordNameOrPromotionName"  placeholder="请输入促销名称、菜品名称" class="layui-input">-->
                            <!--</div>-->
                        <!--</div>-->

                        <!--<button type="button" class="layui-btn layui-btn-normal" id="selectBut">查询</button>-->
                    </div>
                    <div class="layui-form-item">

                        <div class="layui-input-block"style="margin-left: 0px;">
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="0" title="全部" checked >
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="1" title="1楼"  >
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="2" title="2楼" >
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="3" title="3楼">
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="4" title="4楼" >
                            <input type="radio" lay-filter="floorNum" name="floorNum" value="5" title="5楼" >

                        </div>
                    </div>
                </form>
            </div>
            <!--展示数据-->
            <div>

                <table class="layui-hide" id="table" lay-filter="table" align="center"></table>
                <!--        表格头部工具栏-->
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                    </div>
                </script>
                <!--        表格右侧操作栏-->
                <script type="text/html" id="barDemo">
                    <button class="layui-btn                  layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    <!--<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="show"><i class="layui-icon layui-icon-search"></i>查看</button>-->
                </script>

            </div>
        </div>


    </div>

    <!--底部-->
    <i th:replace="~{common :: footer}"></i>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        $("#img1").attr("src",$("#headPortrait")[0].innerText)

        //表格初始化
        table.render({
            elem: '#table'
            ,url:baseUrl+'shop/table/list'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 1005
            ,toolbar: '#toolbarDemo'
            ,cols: [[

                {field:'id', width:200, title: 'ID', hide:true}
                ,{field:'tableName', width:200, title: '桌位名称'}
                ,{field:'num', width:200, title: '容纳人数'}
                ,{field:'statusString', width:200, title: '桌位状态'}
                ,{field:'floorNum', width:200, title: '所在楼层数'}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,skin: 'row' //行边框风格
            ,even: true //开启隔行背景
            ,page: true
            ,where: {
                merchantsId:$("#merchantsId").val(),

    } //设定异步数据接口的额外参数

        });


        form.on('select(merchantsId)', function(data){

            table.reload('table', {
                url: baseUrl+'shop/table/list'
                ,where: {
                    merchantsId:$("#merchantsId").val(),
                } //设定异步数据接口的额外参数

            });

        });

        form.on('radio(floorNum)', function(data){
            table.reload('table', {
                url: baseUrl+'shop/table/list'
                ,where: {
                    merchantsId:$("#merchantsId").val(),
                    floorNum: data.value
                } //设定异步数据接口的额外参数

            });
        });




        //行工具栏事件
        table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'edit'){ //编辑
                layer.msg("编辑")
                layer.open({
                    title: '编辑'
                    ,content: baseUrl+'shop/table/edit-ui?id='+data.id
                    ,type:2
                    ,area: ['450px', '350px']
                    // 弹出层销毁时刷新表格数据
                    ,end:function () {
                        table.reload('table', {
                            url: baseUrl+'shop/table/list'
                            ,where: {
                                merchantsId:$("#merchantsId").val(),

                            } //设定异步数据接口的额外参数

                        });

                    }
                })
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
            else if(layEvent === 'delete'){//删除



                layer.confirm('是否确认删除？', {
                    btn: ['yes', 'no'] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮三】的回调
                        obj.del();
                        layer.open({
                            title: '删除桌位信息'
                            ,content: '删除成功！'
                            // ,end:function () {
                            //     //当你在iframe页面关闭自身时
                            //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            //     parent.layer.close(index); //再执行关闭
                            // }
                        });
                        $.ajax({
                            url:baseUrl+"shop/table/del",
                            data:{"id":data.id},
                            type:"post",
                            dataType:"json",
                            success:function (result) {
                                if (result.code==0){


                                }else {
                                    layer.open({
                                        title: '删除菜品分类信息'
                                        ,content: result.msg
                                    });
                                }
                            },
                            error:function () {
                                layer.msg("服务器原地爆炸,请联系管理员!!!");
                            }
                        })
                        obj.del();
                    }
                },function(index, layero){
                    //按钮【按钮一】的回调

                });


            } else if(layEvent === 'show'){ //查看

                layer.open({
                    title: '查看菜品分类'
                    ,content: baseUrl+'shop/assistant/show?id='+data.id
                    ,type:2
                    ,area: ['1000px', '550px']

                });

            }
        });





        //表头工具栏事件
        table.on('toolbar(table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        content: baseUrl+"shop/table/add-ui?merchantsId="+$("#merchantsId").val(),
                        area: ['450px', '350px'],
                        end:function () {
                            table.reload('table', {
                                url: baseUrl+'shop/table/list'
                                ,where: {
                                    merchantsId:$("#merchantsId").val(),
                                } //设定异步数据接口的额外参数

                            });

                        }
                    });
                    break;



            };
        });













    });
</script>

</body>
</html>
